import PageContainer from '@/components/PageContainer';
import React from 'react';
import { View, Text, Image } from '@tarojs/components';
import { DynamicColors, GStyleSheet } from '@/utils/DarkMode';
import Taro from '@tarojs/taro';

const dstyle = GStyleSheet.create({
  container: {
    paddingLeft: 20,
    paddingRight: 20,
    paddingTop: 10,
  },
  card: {
    backgroundColor: DynamicColors.cardBackgroundColor,
    borderRadius: 12,
    padding: 20,
    marginBottom: 16,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  leftContent: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  icon: {
    width: 40,
    height: 40,
    marginRight: 12,
  },
  textContent: {
    flex: 1,
  },
  title: {
    fontSize: 16,
    fontWeight: 'bold',
    color: DynamicColors.normalTextColor,
    marginBottom: 4,
  },
  desc: {
    fontSize: 12,
    color: DynamicColors.normalTextGaryColor,
  },
  arrow: {
    width: 20,
    height: 20,
  },
  list: {
    paddingLeft: 20,
    paddingRight: 20,
  },
  recordText: {
    fontSize: 13,
    color: DynamicColors.normalTextGaryColor,
  },
  mainTitle: {
    paddingTop: 10,
    paddingLeft: 20,
    paddingRight: 20,
    fontSize: 16,
    color: DynamicColors.normalTextColor,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
});

const rechargeTypes = [
  {
    id: 'duration',
    title: '时长充值',
    desc: '为设备充值使用时长',
    icon: 'https://xbgroup-static.gizwits.com/cybertron/users/391941/media/bx-package_1744358688507.png',
    path: '/pages/payment/deviceList'
  },
  {
    id: 'voice',
    title: '音色复刻（敬请期待）',
    desc: '定制专属音色',
    icon: 'https://xbgroup-static.gizwits.com/cybertron/users/391941/media/voice_fill_(1)_1744358688554.png',
    path: '/pages/payment/packages?type=3'
  }
];

const RechargeType = () => {
  const styles = dstyle.useDynamicStyle();

  const handleCardClick = (path: string) => {
    Taro.navigateTo({
      url: path
    });
  };

  return (
    <PageContainer title="充值">
      <View style={styles.mainTitle}>
        <Text>充值</Text>
        <Text style={styles.recordText} onClick={() => Taro.navigateTo({url: '/pages/payment/record'})}>
          充值记录
        </Text>
      </View>
      <View style={styles.container}>
        {rechargeTypes.map(type => (
          <View 
            key={type.id} 
            style={{...styles.card, ...(type.id === 'voice' && {opacity: 0.6})}}
            onClick={() => type.id !== 'voice' && handleCardClick(type.path)}
          >
            <View style={styles.leftContent}>
              <Image 
                src={type.icon} 
                style={styles.icon}
                mode='aspectFit'
              />
              <View style={styles.textContent}>
                <View style={styles.title}>{type.title}</View>
                <View style={styles.desc}>{type.desc}</View>
              </View>
            </View>
            <Image 
              src={require('@/assets/images/home_icon_arrow.png')}
              style={styles.arrow}
              mode='aspectFit'
            />
          </View>
        ))}
      </View>
    </PageContainer>
  );
};

export default RechargeType;